<template>
	<div>
		<div class="body-content" @click="clickImg(allPages[page - 1])">
			<div id="magazine"  style="width: 100%; height: 100%; ">
				<!-- <div v-for="(item, index) in allPages" :key="`test_${index}`" style="width: 100%; height: 100%; ">
          <div :class="`text${item.page}`" ></div>
		  <image
          :src="allPages[page - 1]"
          mode=""
          style="width: 100%; height: 100%; box-shadow: 0 4px 10px #666"
        ></image>
        </div> -->
			</div>
			<!-- <div style="height: 50vh; width: 100%" v-show="isShow">
        <image
          :src="allPages[page - 1]"
          mode=""
          style="width: 100%; height: 100%; box-shadow: 0 4px 10px #666"
          @click="clickImg(allPages[page - 1])"
        ></image>
      </div> -->
		</div>

		<div>sssssssssssssssssss</div>
		<div @click="per()">1111111111111111</div>
		<div>sssssssssssssssssss</div>
		<div @click="next()">333333333333333333</div>
		<div @click="new1()">加new</div>
		<div @click="add1()">加add</div>
		<div>{{page}}/{{allPages.length}}</div>
	</div>
</template>
<script>
import $ from '@/static/js/jquery';
import turn from '@/static/js/turn';

export default {
	name: 'FenMian2',
	data() {
		return {
			value: '',
			page: 1,
			isShow: true,
			allPages: [],
			allPages: [
				'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1610%2F20%2Fc16%2F28666491_1476977210753.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640872116&t=922b544ebe3792af29a9d9bd433b0e32',
				'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1611%2F28%2Fc5%2F30688771_1480314130697_mthumb.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640872116&t=12b9c57127a9c64dd90424fc17f3f6c0',
				'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F190712%2F1-1ZG2161440.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=da1b0215eef23349fc1e8e9a9037df24',
				'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=afe3d409cb2390b3b4f41fa6cb2b179a',
				'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwallcoo.com%2Fnature%2FSZ_178_Water_Air_and_Greenery%2Fimages%2FHJ069_350A.jpg&refer=http%3A%2F%2Fwallcoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=da637679958fcf44d1f4c307f8b17442',
				'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F201403%2F29%2F20140329145413_hw4HA.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=5bbcc59b82cde0e252a8a3a8960c69d4'
			]
		};
	},
	mounted() {
		this.init();
		let self = this;
		// $("#magazine").turn("center");
		// $("#magazine").turn("page");
		// this.$nextTick(() => {
		//   $("#magazine").turn({
		//     display: "single",
		//     elevation: 50,
		//     duration: 600,
		//     gradients: true,
		//     autoCenter: true,
		//     acceleration: true,
		//     // gradients: !$.isTouch,
		//     page: self.page,
		//     width: "100%",
		//     // when: {
		//     //   turned: function (e, page, pages) {
		//     //     //当前页
		//     //     console.log("Current view: ", $(this).turn("view"));
		//     //     //总页数
		//     //     console.log(
		//     //       "#magazine has " + $("#magazine").turn("pages") + " pages"
		//     //     );
		//     //     // $("#magazine").turn("hasPage", 10);
		//     //     // $("#magazine").turn("pages", 5);
		//     //   },
		//     // },
		//   });
		//   $("#magazine").bind("turning", function (event, page, view) {
		//     self.isShow = false;
		//   });
		//   $("#magazine").bind("turned", function (event, page, view) {
		//     self.isShow = true;
		//   });
		// });
	},
	methods: {
		initTurn() {
			let self = this;
			$('#magazine').turn({
				display: 'single',
				elevation: 50,
				duration: 600,
				gradients: true,
				autoCenter: true,
				acceleration: true,
				// gradients: !$.isTouch,
				// page: self.page,
				width: '100%',
				when: {
					turned: function(e, page, pages) {
						//当前页
						console.log('Current view: ', $(this).turn('view'));
						//总页数
						console.log('#magazine has ' + $('#magazine').turn('pages') + ' pages');
						// $("#magazine").turn("hasPage", 10);
						// $("#magazine").turn("pages", 5);
					}
				}
			});
		},
		init() {
			this.$nextTick(() => {
				let self = this;
				// $("#magazine").turn()
				let allPages = [
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1610%2F20%2Fc16%2F28666491_1476977210753.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640872116&t=922b544ebe3792af29a9d9bd433b0e32',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1611%2F28%2Fc5%2F30688771_1480314130697_mthumb.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640872116&t=12b9c57127a9c64dd90424fc17f3f6c0',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F190712%2F1-1ZG2161440.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=da1b0215eef23349fc1e8e9a9037df24',

					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=afe3d409cb2390b3b4f41fa6cb2b179a',

					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwallcoo.com%2Fnature%2FSZ_178_Water_Air_and_Greenery%2Fimages%2FHJ069_350A.jpg&refer=http%3A%2F%2Fwallcoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=da637679958fcf44d1f4c307f8b17442',

					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F201403%2F29%2F20140329145413_hw4HA.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=5bbcc59b82cde0e252a8a3a8960c69d4'
				];
				var element = '';
				this.allPages=allPages
				for (var i = 0; i < allPages.length; i++) {
					element += '<div  style="width: 100%; height: 100%; "><img class="imgCover" src="' + allPages[i] + '"  style="width: 100%; height: 100%; "/></div>';
					// var page = $("#magazine").turn("pages");
				}
				$('#magazine').html(element);
				// $("#magazine").turn("addPage", element);
				// var element = $('<div  style="width: 100%; height: 100%; "><img class="imgCover" src="' + allPages[this.page] + '"  style="width: 100%; height: 100%; "/></div>');
				// var page = $("#magazine").turn("pages");
				// $("#magazine").turn("addPage", element,this.page);
				this.initTurn();
				// $("#magazine").turn("page", this.page);
				// $("#magazine").turn({
				//   display: "single",
				//   elevation: 50,
				//   duration: 600,
				//   gradients: true,
				//   autoCenter: true,
				//   acceleration: true,
				//   // gradients: !$.isTouch,
				//   page: self.page,
				//   width: "100%",
				//   when: {
				//     turned: function (e, page, pages) {
				//       //当前页
				//       console.log("Current view: ", $(this).turn("view"));
				//       //总页数
				//       console.log(
				//         "#magazine has " + $("#magazine").turn("pages") + " pages"
				//       );
				//       // $("#magazine").turn("hasPage", 10);
				//       // $("#magazine").turn("pages", 5);
				//     },
				//   },
				// });
				//   $("#magazine").bind("turning", function (event, page, view) {
				//     self.isShow = false;
				//   });
				//   $("#magazine").bind("turned", function (event, page, view) {
				//     self.isShow = true;
				//   });
			});
		},
		per() {
			let that = this;
			if (this.page < 2) {
				return;
			}
			this.page--;
			console.log('上', this.page);
			//   $("#magazine").turn("page", this.page);

			$("#magazine").turn("previous");
			// this.init()
		},
		next() {
			let that = this;
			if (this.page == this.allPages.length) {
				return;
			}
			this.page++;
			$('#magazine').turn('next');

			console.log('下', this.page);
			//   $("#magazine").turn("page", this.page);
			// this.init()
		},
		new1() {
			console.log('新')
			let allPages = [
				'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1611%2F28%2Fc5%2F30688771_1480314130697_mthumb.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640872116&t=12b9c57127a9c64dd90424fc17f3f6c0',
				'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F190712%2F1-1ZG2161440.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=da1b0215eef23349fc1e8e9a9037df24',
				'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1610%2F20%2Fc16%2F28666491_1476977210753.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640872116&t=922b544ebe3792af29a9d9bd433b0e32',
				'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=afe3d409cb2390b3b4f41fa6cb2b179a',
				'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwallcoo.com%2Fnature%2FSZ_178_Water_Air_and_Greenery%2Fimages%2FHJ069_350A.jpg&refer=http%3A%2F%2Fwallcoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=da637679958fcf44d1f4c307f8b17442'
			];
			var element = '';
			this.allPages=allPages
			// $('#magazine').html('');
			for (var i = 0; i < allPages.length; i++) {
				element += '<div  style="width: 100%; height: 100%; "><img class="imgCover" src="' + allPages[i] + '"  style="width: 100%; height: 100%; "/></div>';
				// var page = $("#magazine").turn("pages");
				$('#magazine').turn("addPage", element,i+1);
			}
			// $('#magazine').html(element);
			// this.initTurn();
			// $("#magazine").turn("page", 1);
			// this.initTurn();
			// $("#magazine").turn("page", this.page);
		},
		add1() {
			console.log('加')
			// $('#magazine').html('');
		let allPages = [
			'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1611%2F28%2Fc5%2F30688771_1480314130697_mthumb.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640872116&t=12b9c57127a9c64dd90424fc17f3f6c0',
			'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F190712%2F1-1ZG2161440.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=da1b0215eef23349fc1e8e9a9037df24',
			'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1610%2F20%2Fc16%2F28666491_1476977210753.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640872116&t=922b544ebe3792af29a9d9bd433b0e32',
			'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F201403%2F29%2F20140329145413_hw4HA.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=5bbcc59b82cde0e252a8a3a8960c69d4',
			'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwallcoo.com%2Fnature%2FSZ_178_Water_Air_and_Greenery%2Fimages%2FHJ069_350A.jpg&refer=http%3A%2F%2Fwallcoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=da637679958fcf44d1f4c307f8b17442',
			'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwallcoo.com%2Fnature%2FSZ_178_Water_Air_and_Greenery%2Fimages%2FHJ069_350A.jpg&refer=http%3A%2F%2Fwallcoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=da637679958fcf44d1f4c307f8b17442',
			'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwallcoo.com%2Fnature%2FSZ_178_Water_Air_and_Greenery%2Fimages%2FHJ069_350A.jpg&refer=http%3A%2F%2Fwallcoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=da637679958fcf44d1f4c307f8b17442',
			'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=afe3d409cb2390b3b4f41fa6cb2b179a',
		];
		var element = '';
		this.allPages=allPages
		for (var i = 0; i < allPages.length; i++) {
			element = '<div  style="width: 100%; height: 100%; "><img class="imgCover" src="' + allPages[i] + '"  style="width: 100%; height: 100%; "/></div>';
			// var page = $("#magazine").turn("pages");
			$('#magazine').turn("addPage", element,i+1);
		}
		
		// $('#magazine').html(element);
		// this.initTurn();
		// $("#magazine").turn("page", this.page);
		},
		clickImg(url) {
			wx.previewImage({
				urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {}
			});
		}
	},
	components: {}
};
</script>
<style lang="less" scoped>
body {
	background: #ccc;
}

#magazine {
	width: 100%;
	height: 50vh;
	.text {
		width: 100%;
		height: 100%;
	}
	.text1 {
		background: url(
				https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1610%2F20%2Fc16%2F28666491_1476977210753.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,
				10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640872116&t=922b544ebe3792af29a9d9bd433b0e32
			)
			no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}

	.text2 {
		background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1611%2F28%2Fc5%2F30688771_1480314130697_mthumb.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640872116&t=12b9c57127a9c64dd90424fc17f3f6c0')
			no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}

	.text3 {
		background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F190712%2F1-1ZG2161440.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=da1b0215eef23349fc1e8e9a9037df24')
			no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}

	.text4 {
		background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=afe3d409cb2390b3b4f41fa6cb2b179a')
			no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}

	.text5 {
		background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwallcoo.com%2Fnature%2FSZ_178_Water_Air_and_Greenery%2Fimages%2FHJ069_350A.jpg&refer=http%3A%2F%2Fwallcoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=da637679958fcf44d1f4c307f8b17442')
			no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}

	.text6 {
		background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F201403%2F29%2F20140329145413_hw4HA.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640867294&t=5bbcc59b82cde0e252a8a3a8960c69d4')
			no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}

	// .current-page {
	//   position: absolute;
	//   bottom: 0;
	//   width: 100%;
	//   text-align: center;
	//   font-size: 14px;
	//   .even-numbers {
	//     width: 30px;
	//     height: 30px;
	//     background: #ffcc66;
	//     color: #fff;
	//     right: 0;
	//     position: absolute;
	//     bottom: 0px;
	//     line-height: 30px;
	//     text-align: center;
	//   }
	//   .odd-number {
	//     position: absolute;
	//     bottom: 0px;
	//     width: 30px;
	//     height: 30px;
	//     background: #cc00ff;
	//     color: #fff;
	//     line-height: 30px;
	//     text-align: center;
	//   }
	// }
}

#magazine .shadow,
#magazine.shadow {
	-webkit-box-shadow: 0 4px 10px #666;
	-moz-box-shadow: 0 4px 10px #666;
	-ms-box-shadow: 0 4px 10px #666;
	-o-box-shadow: 0 4px 10px #666;
	box-shadow: 0 4px 10px #666;
}

// #magazine .turn-page {
//   background-color: #ccc;
//   background-size: 100% 100%;
// }
// '.bookmark {
//   margin-left: 633px;
//   font-size: 20px;
//   writing-mode: tb-rl;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   text-align: center;
//   padding-top: 47px;
//   .item:nth-child(2n) {
//     background: #ccc;
//     width: 45px;
//     height: 150px;
//   }
//   .item {
//     width: 45px;
//     height: 160px;
//     background: red;
//   }
//   .item:nth-child(1) {
//     z-index: 4;
//     text-shadow: 6px 6px 6px #999;
//   }
//   .item:nth-child(2) {
//     z-index: 3;
//     text-shadow: 6px 6px 6px #333;
//   }
//   .item:nth-child(3) {
//     z-index: 2;
//     text-shadow: 6px 6px 6px #333;
//   }
//   .item:nth-child(4) {
//     z-index: 1;
//     text-shadow: 6px 6px 6px #333;
//   }
// }'
</style>
